<template>
  <div>
    <div class="gva-table-box">
      <div style="margin-bottom: 20px;">
        <el-select
          v-model="searchInfo.game_id"
          style="width: 18%;margin-right: 20px"
          placeholder="请选择游戏"
          clearable
        >
          <el-option
            v-for="item in gameIdsArr"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <el-date-picker
          v-if="isShowDate"
          v-model="date"
          style="margin-right: 20px;"
          type="date"
          placeholder="选择日期"
          @change="searchChange"
        /> -->
        <el-input
          v-model="searchInfo.keyword"
          placeholder="请输入账户或账户ID"
          style="width: 15%;margin-right: 20px;"
        />
        <el-button
          type="primary"
          @click="search()"
        >
          查询
        </el-button>
      </div>
      <div>
        <el-checkbox
          v-model="showData"
          label="展示消耗数据"
          size="large"
          @change="changeShowData"
        />
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        style="width: 100%"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          label="巨量"
          name="1"
        >
          <div style="margin-bottom: 10px;">
            <el-select
              v-model="hugeSelectColumn"
              multiple
              clearable
              filterable
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="3"
              placeholder="请选择列"
              style="width: 500px"
            >
              <el-option
                v-for="item in hugeColumns"
                :key="item.prop"
                :label="item.label"
                :value="item.prop"
              />
            </el-select>
            <span
              style="padding-left: 10px;"
            >
              <el-button
                type="primary"
                @click="selectHugeColumn"
              >确定</el-button>
            </span>
            <span style="padding-left: 10px;">
              <el-button
                type="warning"
                @click="sync(1)"
              >同步账户</el-button>
            </span>
          </div>
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            row-key="ID"
            :data="hugeTableData"
            border
          >
            <el-table-column
              align="left"
              label="游戏名称"
              width="150px"
              prop="game_name"
              fixed="left"
            />
            <el-table-column
              align="left"
              label="账户名称"
              width="300px"
              prop="advertiser_name"
              fixed="left"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="projectList(scope.row)"
                >
                  {{ scope.row.advertiser_name }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="账户"
              width="200px"
              prop="advertiser_id"
              fixed="left"
            />
            <!-- <el-table-column
              align="left"
              label="ECPM"
              width="200px"
              prop="ecpm"
            />
            <el-table-column
              align="left"
              label="时长(秒)"
              width="200px"
              prop="time"
            />
            <el-table-column
              align="left"
              label="ARPU"
              width="200px"
              prop="arpu"
            />
            <el-table-column
              align="left"
              label="IPU"
              width="200px"
              prop="ipu"
            /> -->
            <el-table-column
              v-for="(item,index) in hugeTableColumns"
              :key="index"
              width="200px"
              align="left"
              :label="item.label"
            >
              <template #default="scope">
                <span style="margin-right: 5px;">
                  {{ scope.row[item.prop] }}
                </span>
                <span v-if="item.prop.indexOf('today') == -1">
                  <span
                    v-if="scope.row[`${item.prop}_compare`] == 'red'"
                    style="color: red;"
                  >
                    {{ scope.row[`${item.prop}_num`] }}
                    <el-icon><CaretTop /></el-icon>
                  </span>
                  <span
                    v-if="scope.row[`${item.prop}_compare`] == 'green'"
                    style="color: green;"
                  >
                    {{ scope.row[`${item.prop}_num`] }}
                    <el-icon><CaretBottom /></el-icon>
                  </span>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="磁力"
          name="3"
        >
          <div style="margin-bottom: 10px;">
            <el-select
              v-model="kuaishouSelectColumn"
              multiple
              clearable
              filterable
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="3"
              placeholder="请选择列"
              style="width: 500px"
            >
              <el-option
                v-for="item in kuaishouColumns"
                :key="item.prop"
                :label="item.label"
                :value="item.prop"
              />
            </el-select>
            <span
              style="padding-left: 10px;"
            >
              <el-button
                type="primary"
                @click="selectKuaishouColumn"
              >确定</el-button>
            </span>
            <span style="padding-left: 10px;">
              <el-button
                type="warning"
                @click="sync(3)"
              >同步账户</el-button>
            </span>
          </div>
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            row-key="ID"
            :data="kuaishouData"
            border
          >

            <el-table-column
              align="left"
              label="游戏名称"
              width="150px"
              prop="game_name"
              fixed="left"
            />
            <el-table-column
              align="left"
              label="账户名称"
              width="300px"
              fixed="left"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="ciliProject(scope.row)"
                >
                  {{ scope.row.advertiser_name }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="账户"
              width="200px"
              prop="advertiser_id"
              fixed="left"
            />
            <el-table-column
              v-for="(item,index) in kuaishouTableColumns"
              :key="index"
              width="200px"
              align="left"
              :label="item.label"
            >
              <template #default="scope">
                <span style="margin-right: 5px;">
                  {{ scope.row[item.prop] }}
                </span>
                <span v-if="item.prop.indexOf('today') == -1">
                  <span
                    v-if="scope.row[`${item.prop}_compare`] == 'red'"
                    style="color: red;"
                  >
                    {{ scope.row[`${item.prop}_num`] }}
                    <el-icon><CaretTop /></el-icon>
                  </span>
                  <span
                    v-if="scope.row[`${item.prop}_compare`] == 'green'"
                    style="color: green;"
                  >
                    {{ scope.row[`${item.prop}_num`] }}
                    <el-icon><CaretBottom /></el-icon>
                  </span>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="gva-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getAccountData,
  getHugeInfo
} from '@/api/qmAccessTokens'
import { useUserStore } from '@/pinia/modules/user'
import { useRouter, useRoute } from 'vue-router'
import {
  getQmGameListList
} from '@/api/qmGameList'
import { hu } from 'element-plus/es/locale'

const router = useRouter()

// =========== 表格控制部分 ===========

const projectList = (row) => {
  router.push({
    name: 'qmAccountProject', query: { account_id: row.advertiser_id, platform: activeName.value }
  })
}

const ciliProject = (row) => {
  console.log(row)
  router.push({
    name: 'qmCiliProject', query: { account_id: row.advertiser_id, platform: activeName.value }
  })
}

const activeName = ref('1')

const handleTabClick = (tab, event) => {
  activeName.value = tab.props.name
  searchInfo.value.platform = tab.props.name
  searchInfo.value.page = 1
  if (activeName.value === '1') {
    date.value = new Date()
    isShowDate.value = true
    searchInfo.value.date = date.value.toLocaleDateString('en-CA')
    getHugeTableData()
  } else {
    isShowDate.value = false
    searchInfo.value.date = ''
    getKuaishouTableData()
  }
}
// 获取今天的日期
const date = ref(new Date())

const kuaishouColumns = ref([
  {
    label: '消耗',
    prop: 'charge'
  },
  {
    label: '曝光数',
    prop: 'aclick'
  },
  {
    'label': 'ECPM',
    'prop': 'ecpm'
  },
  {
    'label': '时长(秒)',
    'prop': 'time'
  },
  {
    'label': 'ARPU',
    'prop': 'arpu'
  },
  {
    'label': 'IPU',
    'prop': 'ipu'
  },

  {
    label: '行为数',
    prop: 'bclick'
  },
  {
    label: '千次曝光',
    prop: 'impression_1k_cost'
  },
  {
    label: '点击单价',
    prop: 'photo_click_cost'
  },
  {
    label: '行为单价',
    prop: 'action_cost'
  },
  {
    label: '激活数',
    prop: 'activation'
  },
  {
    label: '千次素材曝光花费',
    prop: 'click_1k_cost'
  },
  {
    label: '激活成本',
    prop: 'click_conversion_ratio'
  },
  {
    label: '激活单价',
    prop: 'conversion_cost'
  },
  {
    label: '3日留存',
    prop: 'event_three_day_stay_by_conversion'
  },
  {
    label: '7日留存',
    prop: 'event_week_stay_by_conversion'
  },
  {
    label: '转化数',
    prop: 'conversion_num'
  },
  {
    label: '三留率',
    prop: 'event_three_day_stay_by_conversion_ratio'
  },
  {
    label: '7留率',
    prop: 'event_week_stay_by_conversion_ratio'
  },
  {
    label: '转化成本',
    prop: 'conversion_num_cost'
  },
  {
    label: '转化率',
    prop: 'conversion_ratio'
  },
  {
    label: '广告LTV',
    prop: 'minigame_iaa_purchase_amount_first_day'
  },
  {
    label: '三日LTV',
    prop: 'minigame_iaa_purchase_amount_three_day_by_conversion'
  },
  {
    label: '七日LTV',
    prop: 'minigame_iaa_purchase_amount_week_by_conversion'
  },
  {
    label: 'ROI',
    prop: 'minigame_iaa_purchase_amount_first_day_roi'
  },
  {
    label: '三日ROI',
    prop: 'minigame_iaa_purchase_amount_three_day_by_conversion_roi'
  },
  {
    label: '七日ROI',
    prop: 'minigame_iaa_purchase_amount_week_by_conversion_roi'
  },
  {
    label: '变现LTV',
    prop: 'minigame_iaa_purchase_amount'
  },
  {
    label: '变现ROI',
    prop: 'minigame_iaa_purchase_roi'
  },
])

const hugeColumns = ref([
  {
    'label': '消耗',
    'prop': 'cost'
  },
  {
    'label': '曝光',
    'prop': 'show'
  },
  {
    'label': '千次曝光',
    'prop': 'avg_show_cost'
  },
  {
    'label': 'ECPM',
    'prop': 'ecpm'
  },
  {
    'label': '时长(秒)',
    'prop': 'time'
  },
  {
    'label': 'ARPU',
    'prop': 'arpu'
  },
  {
    'label': 'IPU',
    'prop': 'ipu'
  },

  {
    'label': '点击率',
    'prop': 'ctr'
  },
  {
    'label': '转化数',
    'prop': 'convert'
  },
  {
    'label': '转化成本',
    'prop': 'convert_cost'
  },
  {
    'label': '转化率',
    'prop': 'convert_rate'
  },
  {
    'label': '激活数',
    'prop': 'active'
  },
  {
    'label': '激活成本',
    'prop': 'active_cost'
  },
  {
    'label': '激活率',
    'prop': 'active_rate'
  },
  {
    'label': '次留',
    'prop': 'attribution_next_day_open_rate'
  },
  {
    'label': '二留',
    'prop': 'attribution_retention_2d_rate'
  },
  {
    'label': '三留',
    'prop': 'attribution_retention_3d_rate'
  },

  {
    'label': '七留',
    'prop': 'attribution_retention_7d_rate'
  },
  {
    'label': '行为数',
    'prop': 'game_addiction'
  },
  {
    'label': '行为成本',
    'prop': 'game_addiction_cost'
  },
  {
    'label': '行为达成率',
    'prop': 'game_addiction_rate'
  },
  {
    'label': '当日LTV',
    'prop': 'attribution_micro_game_0d_ltv'
  },
  {
    'label': '三日LTV',
    'prop': 'attribution_micro_game_3d_ltv'
  },
  {
    'label': '七日LTV',
    'prop': 'attribution_micro_game_7d_ltv'
  },

  {
    'label': '当日ROI',
    'prop': 'attribution_micro_game_0d_roi'
  },
  {
    'label': '三日ROI',
    'prop': 'attribution_micro_game_3d_roi'
  },
  {
    'label': '七日ROI',
    'prop': 'attribution_micro_game_7d_roi'
  },

])

const hugeSelectColumn = ref([])
const kuaishouSelectColumn = ref([])

const selectHugeColumn = () => {
  hugeTableColumns.value = []
  // 把选中的列加入到表格列中
  if (hugeSelectColumn.value.length === 0) {
    // 如果没有选择列 默认展示全部列
    hugeColumns.value.forEach(item => {
      dayColumn.value.forEach((day) => {
        hugeTableColumns.value.push({
          label: `${day.label}-${item.label}`,
          prop: `${item.prop}_${day.value}`
        })
      })
    })
  } else {
    hugeSelectColumn.value.forEach(item => {
      dayColumn.value.forEach((day) => {
        const obj = hugeColumns.value.find(i => i.prop === item)
        hugeTableColumns.value.push({
          label: `${day.label}-${obj.label}`,
          prop: `${item}_${day.value}`
        })
      })
    })
  }
}

const selectKuaishouColumn = () => {
  console.log(kuaishouSelectColumn.value)
  kuaishouTableColumns.value = []
  // 把选中的列加入到表格列中
  if (kuaishouSelectColumn.value.length == 0) {
    // 如果没有选择列 默认展示全部列
    kuaishouColumns.value.forEach(item => {
      dayColumn.value.forEach((day) => {
        kuaishouTableColumns.value.push({
          label: `${day.label}-${item.label}`,
          prop: `${item.prop}_${day.value}`
        })
      })
    })
  } else {
    kuaishouSelectColumn.value.forEach(item => {
      dayColumn.value.forEach((day) => {
        const obj = kuaishouColumns.value.find(i => i.prop === item)
        kuaishouTableColumns.value.push({
          label: `${day.label}-${obj.label}`,
          prop: `${item}_${day.value}`
        })
      })
    })
  }
}

const page = ref(1)
const pageSize = ref(5)
const total = ref(0)
// 表格数据
const hugeTableColumns = ref([])
const kuaishouTableColumns = ref([])

const hugeTableData = ref([])
const kuaishouData = ref([])
// 格式化时间 北京时间
const formattedDate = date.value.toLocaleDateString('en-CA')
const isShowDate = ref(true)
const searchInfo = ref({
  platform: '1',
  date: formattedDate,
  page: 1,
  page_size: pageSize.value,
  keyword: '',
  game_id: undefined
})

const handleCurrentChange = (val) => {
  page.value = val
  searchInfo.value.page = val
  if (activeName.value === '1') {
    getHugeTableData()
  } else {
    getKuaishouTableData()
  }
}

const userStore = useUserStore()

const gameIdsArr = ref([])
const getGameList = async() => {
  const gameIds = userStore.userInfo.gameIds
  const arr = []
  const res = await getQmGameListList({ page: 1, pageSize: 9999 })
  if (res.code === 0) {
    res.data.list.forEach(item => {
      arr.push({
        id: item.id,
        label: item.name,
        value: item.game_hash
      })
    })
  }
  if (gameIds.length === 0) {
    gameIdsArr.value = arr
  } else {
    gameIds.forEach(item => {
      arr.forEach(i => {
        if (i.id === item.QmGameId) {
          gameIdsArr.value.push(i)
        }
      })
    })
  }
}
getGameList()

const temHugeTableData = ref([])
const temKuaishouData = ref([])

const showData = ref(false)
const changeShowData = (val) => {
  showData.value = val
  if (val) {
    const arr = []
    if (activeName.value == '1') {
      hugeTableData.value.forEach(item => {
        if (item.cost_today > 0) {
          arr.push(item)
        }
      })
      hugeTableData.value = arr
    } else if (activeName.value == '3') {
      kuaishouData.value.forEach(item => {
        if (item.cost_today > 0) {
          arr.push(item)
        }
      })
      kuaishouData.value = arr
    }
  } else {
    if (activeName.value == '1') {
      hugeTableData.value = temHugeTableData.value
    } else if (activeName.value == '3') {
      kuaishouData.value = temKuaishouData.value
    }
  }
}

var searchChange = function(date) {
  // 格式化时间
  searchInfo.value.date = date.toLocaleDateString('en-CA')
}

const dayColumn = ref([
  {
    label: '当日',
    value: 'today'
  },
  {
    label: '昨日',
    value: 'yesterday'
  },
  {
    label: 'WT',
    value: 'week'
  }
])

const setHugeColumn = () => {
  hugeColumns.value.forEach(item => {
    dayColumn.value.forEach((day) => {
      hugeTableColumns.value.push({
        label: `${day.label}-${item.label}`,
        prop: `${item.prop}_${day.value}`
      })
    })
  })
}

const setKuaishouColumn = () => {
  kuaishouColumns.value.forEach(item => {
    dayColumn.value.forEach(day => {
      kuaishouTableColumns.value.push({
        label: `${day.label}-${item.label}`,
        prop: `${item.prop}_${day.value}`
      })
    })
  })
}

const sync = (platform) => {
  getHugeInfo({ type: 'sync', params: platform }).then(res => {
    if (res.code == 0) {
      ElMessage.success('同步成功')
      // 刷新页面
      window.location.reload()
    }
  })
}

// 查询
const getHugeTableData = function() {
  getAccountData(searchInfo.value).then(res => {
    if (res.code == 0) {
      hugeTableData.value = []
      temHugeTableData.value = []
      total.value = res.data.total ?? 0
      for (let i = 0; i < res.data.list.length; i++) {
        const item = res.data.list[i]
        let today = {}
        let yesterday = {}
        let week = {}
        if (item.today) {
          today = JSON.parse(item.today)
        }
        if (item.yesterday) {
          yesterday = JSON.parse(item.yesterday)
        }

        if (item.week) {
          week = JSON.parse(item.week)
        }

        const obj = {
          'advertiser_id': item.advertiser_id,
          'advertiser_name': item.advertiser_name,
          'stat_datetime': today['stat_datetime'],
          'game_name': item.game_name
        }

        hugeColumns.value.forEach(column => {
          obj[`${column.prop}_today`] = today[column.prop]
          obj[`${column.prop}_yesterday`] = yesterday[column.prop]
          // 如果有对比 算出来上涨或者下降百分比
          if (yesterday[column.prop] == today[column.prop]) {
            obj[`${column.prop}_yesterday_compare`] = 'gray'
          } else if (yesterday[column.prop] < today[column.prop]) {
            obj[`${column.prop}_yesterday_compare`] = 'red'
            if (yesterday[column.prop] == 0) {
              obj[`${column.prop}_yesterday_num`] = `(${((today[column.prop] - yesterday[column.prop]) / 1).toFixed(2)}%)`
            } else {
              obj[`${column.prop}_yesterday_num`] = `(${((today[column.prop] - yesterday[column.prop]) / yesterday[column.prop] * 100).toFixed(2)}%)`
            }
          } else {
            obj[`${column.prop}_yesterday_compare`] = 'green'
            if (yesterday[column.prop] == 0) {
              obj[`${column.prop}_yesterday_num`] = `(${((yesterday[column.prop] - today[column.prop]) / 1).toFixed(2)}%)`
            } else {
              obj[`${column.prop}_yesterday_num`] = `(${((yesterday[column.prop] - today[column.prop]) / yesterday[column.prop] * 100).toFixed(2)}%)`
            }
          }

          obj[`${column.prop}_week`] = week[column.prop]
          if (week[column.prop] == today[column.prop]) {
            obj[`${column.prop}_week_compare`] = 'gray'
          } else if (week[column.prop] < today[column.prop]) {
            obj[`${column.prop}_week_compare`] = 'red'
            if (week[column.prop] == 0) {
              obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / 1).toFixed(2)}%)`
            } else {
              obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
            }
          } else {
            obj[`${column.prop}_week_compare`] = 'green'
            if (week[column.prop] == 0) {
              obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / 1).toFixed(2)}%)`
            } else {
              obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
            }
          }
        })

        temHugeTableData.value.push(obj)
        if (showData.value && today.cost == 0) {
          // 跳过
          continue
        }
        hugeTableData.value.push(obj)
        getNowAccountData(item.advertiser_id, 1)
      }
    }
  })
}

const getNowAccountData = (advertiser_id, platform) => {
  const data = {
    'account': advertiser_id,
  }
  getHugeInfo({ params: JSON.stringify(data), type: 'accountData' }).then(res => {
    if (res.data.info != '1') {
      const info = JSON.parse(res.data.info)
      if (platform == 1) {
        hugeTableData.value.forEach(item => {
          if (item.advertiser_id == advertiser_id) {
            item.ecpm_today = roundNum(info.ecpm)
            item.time_today = roundNum(info.time)
            item.arpu_today = roundNum(info.arpu)
            item.ipu_today = roundNum(info.ipu)
            item.ecpm_yesterday = roundNum(info.yesterday_ecpm)
            item.time_yesterday = roundNum(info.yesterday_time)
            item.arpu_yesterday = roundNum(info.yesterday_arpu)
            item.ipu_yesterday = roundNum(info.yesterday_ipu)
            item.ecpm_week = roundNum(info.week_ecpm)
            item.time_week = roundNum(info.week_time)
            item.arpu_week = roundNum(info.week_arpu)
            item.ipu_week = roundNum(info.week_ipu)
          }
        })
      } else if (platform == 3) {
        kuaishouData.value.forEach(item => {
          if (item.advertiser_id == advertiser_id) {
            item.ecpm_today = roundNum(info.ecpm)
            item.time_today = roundNum(info.time)
            item.arpu_today = roundNum(info.arpu)
            item.ipu_today = roundNum(info.ipu)
            item.ecpm_yesterday = roundNum(info.yesterday_ecpm)
            item.time_yesterday = roundNum(info.yesterday_time)
            item.arpu_yesterday = roundNum(info.yesterday_arpu)
            item.ipu_yesterday = roundNum(info.yesterday_ipu)
            item.ecpm_week = roundNum(info.week_ecpm)
            item.time_week = roundNum(info.week_time)
            item.arpu_week = roundNum(info.week_arpu)
            item.ipu_week = roundNum(info.week_ipu)
          }
        })
      }
    }
  })
}

function roundNum(str) {
  if (str == '0' || str == '') {
    return 0
  } else {
    const num = parseFloat(str)
    const roundedStr = num.toFixed(2)
    return roundedStr
  }
}

const getKuaishouTableData = function() {
  getAccountData(searchInfo.value).then(res => {
    if (res.code == 0) {
      kuaishouData.value = []
      total.value = res.data.total ?? 0

      for (let i = 0; i < res.data.list.length; i++) {
        const obj = {
          'advertiser_id': res.data.list[i].advertiser_id,
          'advertiser_name': res.data.list[i].advertiser_name,
          'game_name': res.data.list[i].game_name
        }

        const item = res.data.list[i]
        if (item.today == null) {
          kuaishouData.value.push(obj)
          getNowAccountData(item.advertiser_id, 3)
          continue
        }
        const today = JSON.parse(item.today)
        // 循环对象 只要数据是浮点型就保留两位小数
        for (const key in today) {
          if (typeof today[key] === 'number') {
            today[key] = today[key].toFixed(2)
          }
        }

        obj['stat_datetime'] = today['stat_datetime']

        kuaishouColumns.value.forEach(column => {
          obj[`${column.prop}_today`] = today[column.prop]
        })

        if (item.yesterday) {
          // 有昨日数据
          const yesterday = JSON.parse(item.yesterday)
          for (const key in yesterday) {
            if (typeof yesterday[key] === 'number') {
              yesterday[key] = yesterday[key].toFixed(2)
            }
          }

          kuaishouColumns.value.forEach(column => {
            obj[`${column.prop}_yesterday`] = yesterday[column.prop]
            // 如果有对比 算出来上涨或者下降百分比
            if (yesterday[column.prop] == today[column.prop]) {
              obj[`${column.prop}_yesterday_compare`] = 'gray'
            } else if (yesterday[column.prop] < today[column.prop]) {
              obj[`${column.prop}_yesterday_compare`] = 'red'
              if (yesterday[column.prop] == 0) {
                obj[`${column.prop}_yesterday_num`] = `(${((today[column.prop] - yesterday[column.prop]) / 1).toFixed(2)}%)`
              } else {
                obj[`${column.prop}_yesterday_num`] = `(${((today[column.prop] - yesterday[column.prop]) / yesterday[column.prop] * 100).toFixed(2)}%)`
              }
            } else {
              obj[`${column.prop}_yesterday_compare`] = 'green'
              if (yesterday[column.prop] == 0) {
                obj[`${column.prop}_yesterday_num`] = `(${((yesterday[column.prop] - today[column.prop]) / 1).toFixed(2)}%)`
              } else {
                obj[`${column.prop}_yesterday_num`] = `(${((yesterday[column.prop] - today[column.prop]) / yesterday[column.prop] * 100).toFixed(2)}%)`
              }
            }
          })
          // 有周数据
          if (item.week) {
            const week = JSON.parse(item.week)
            for (const key in week) {
              if (typeof week[key] === 'number') {
                week[key] = week[key].toFixed(2)
              }
            }
            kuaishouColumns.value.forEach(column => {
              obj[`${column.prop}_week`] = week[column.prop]
              if (week[column.prop] == today[column.prop]) {
                obj[`${column.prop}_week_compare`] = 'gray'
              } else if (week[column.prop] < today[column.prop]) {
                obj[`${column.prop}_week_compare`] = 'red'
                if (week[column.prop] == 0) {
                  obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / 1).toFixed(2)}%)`
                } else {
                  obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
                }
              } else {
                obj[`${column.prop}_week_compare`] = 'green'
                if (week[column.prop] == 0) {
                  obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / 1).toFixed(2)}%)`
                } else {
                  obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
                }
              }
            })
          } else {
            // 没有周数据
            kuaishouColumns.value.forEach(column => {
              obj[`${column.prop}_week`] = '暂无数据'
              obj[`${column.prop}_week_compare`] = 'gray'
            })
          }

          temKuaishouData.value.push(obj)
          if (showData.value && today.cost == 0) {
          // 跳过
            continue
          }
          kuaishouData.value.push(obj)
          getNowAccountData(item.advertiser_id, 3)
        } else {
          // 没有昨日数据
          kuaishouColumns.value.forEach(column => {
            obj[`${column.prop}_yesterday`] = '暂无数据'
            obj[`${column.prop}_yesterday_compare`] = 'gray'
          })

          // 有周数据
          if (item.week) {
            const week = JSON.parse(item.week)
            kuaishouColumns.value.forEach(column => {
              obj[`${column.prop}_week`] = week[column.prop]
              if (week[column.prop] == today[column.prop]) {
                obj[`${column.prop}_week_compare`] = 'gray'
              } else if (week[column.prop] < today[column.prop]) {
                obj[`${column.prop}_week_compare`] = 'red'
                if (week[column.prop] == 0) {
                  obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / 1).toFixed(2)}%)`
                } else {
                  obj[`${column.prop}_week_num`] = `(${((today[column.prop] - week[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
                }
              } else {
                obj[`${column.prop}_week_compare`] = 'green'
                if (week[column.prop] == 0) {
                  obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / 1).toFixed(2)}%)`
                } else {
                  obj[`${column.prop}_week_num`] = `(${((week[column.prop] - today[column.prop]) / week[column.prop] * 100).toFixed(2)}%)`
                }
              }
            })
          } else {
            // 没有周数据
            kuaishouColumns.value.forEach(column => {
              obj[`${column.prop}_week`] = '暂无数据'
              obj[`${column.prop}_week_compare`] = 'gray'
            })
          }

          temKuaishouData.value.push(obj)
          if (showData.value && today.cost == 0) {
          // 跳过
            continue
          }
          kuaishouData.value.push(obj)
          getNowAccountData(item.advertiser_id, 3)
        }
      }
    }
  })
}

const search = () => {
  console.log(3)
  // if (searchInfo.value.game_id == undefined) {
  //   ElMessage.error('请选择游戏')
  //   return
  // }
  if (activeName.value === '1') {
    if (searchInfo.value.date === '') {
      ElMessage.error('请选择日期')
      return
    } else {
      getHugeTableData()
    }
  } else if (activeName.value === '3') {
    getKuaishouTableData()
  }
}
getHugeTableData()
setHugeColumn()
setKuaishouColumn()

</script>
<style>
.el-col {
  text-align: center;
}
</style>
